<template>
  <div id="main">
    <div id="form">
      <div id="img" style="text-align: center;">
        <img src="../../assets/images/bcu.jpg">
      </div>
      <h2 style="text-align: center; margin-top: 30px; margin-bottom: 30px;">北京城市学院精彩瞬间提交表</h2>
      <el-form :model="moment" :rules="rules">
        <el-form-item label="精彩瞬间内容" :label-width="formLabelWidth" prop="momentContent">
          <!-- <el-input v-model="act.actTitle" autocomplete="off" maxlength="20" show-word-limit :readonly="readonly" /> -->
          <el-input v-model="moment.momentContent" rows="5" autocomplete="off" :readonly="readonly" type="textarea" placeholder="请详细描述活动内容,50字左右" resize="none" />
        </el-form-item>
        <el-form-item label="精彩瞬间图片" :label-width="formLabelWidth" prop="momentContentImg">
          <el-upload
            name="files"
            :action="url"
            list-type="picture-card"
            :on-success="handleContentSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="contentFileList"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div id="buttons">
        <el-button v-show="!readonly" type="primary" :loading="loading" @click="handleSubmit">提 交</el-button>
      </div>
    </div>
    <div id="empty" style="margin-bottom: 30px;" />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getUserInfoByToken } from '../../api/userInfo.js'
import { addMoment } from '../../api/moment.js'
export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      readonly: false,
      // url: process.env.VUE_APP_BASE_API + 'file/',
      url: 'https://www.whwmiki.cn/fy/api/file/',
      loading: false,
      dialogFormVisible: true,
      formLabelWidth: '100px',
      title: '北京城市学院精彩瞬间提交表',
      dialogImageUrl: '',
      contentFileList: [],
      dialogVisible: false,
      userInfo: {},
      moment: {
        momentContentImg: ''
      },
      rules: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    // showInfo(userId) {
    //   this.title = '活动详情'
    //   this.readonly = true
    //   this.fetchData(userId)
    // },
    // editInfo(userId) {
    //   this.title = '编辑活动信息'
    //   this.readonly = false
    //   this.fetchData(userId)
    // },
    // fetchData(userId) {
    //   this.loading = true
    //   getUserInfoById(userId).then((data) => {
    //     this.user = data.obj
    //     this.loading = false
    //     this.dialogFormVisible = true
    //   })
    // },
    handleRemove(file, fileList) {
      this.contentFileList = fileList
      const list = fileList.map((item) => { return item.response.obj })
      this.act.actContentImg = list.join('')
      console.log(this.act.actContentImg)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleContentSuccess(res, file, fileList) {
      console.log(fileList)
      if (res.result === true) {
        this.$notify({
          title: '成功',
          message: '图片上传成功',
          type: 'success'
        })
        this.moment.momentContentImg += res.obj
        this.contentFileList = fileList
      } else {
        this.$notify({
          title: '成功',
          message: '图片上传失败',
          type: 'error'
        })
      }
    },
    handleSubmit() {
      console.log(1111)
      // this.act.validate().then(()=>{
      getUserInfoByToken().then((resp) => {
        this.userInfo = resp.obj
        this.$confirm(`请确认申报人信息是否正确\n申报人姓名：${this.userInfo.userName}\n申报人电话：${this.userInfo.userPhone}\n申报人邮箱：${this.userInfo.userEmail}\n`).then(() => {
          this.moment.momentUserId = this.userInfo.userId
          console.log('活动提交')
          console.log(this.moment)
          this.loading = true
          addMoment(this.moment).then(() => {
            this.moment = {}
            this.contentImageUrl = ''
            this.contentFileList = []
            this.loading = false
            this.dialogVisible = false
            this.$alert('精彩瞬间提交成功，审核通过后，您将收到邮件通知', '提交成功', {
              confirmButtonText: '确定'
            }
            )
          }).catch((resp) => {
            this.loading = false
            this.$notify({
              title: '系统繁忙',
              message: resp.msg,
              type: 'error'
            })
          })
        })
      })
    },
    beforeAvatarUpload() {}

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
  #main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 0 auto;
    margin-top: 30px;
    width: 900px;

  }
  #buttons{
    text-align: center;
  }

  #step{
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
  }

  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
